<template>
	<view class="page">
		<view class="mapPage">
            <map style="width: 100%; height: 100vh;" id="map" :latitude="latitude" :longitude="longitude" :markers="covers" :show-location="true" @markertap="bindMarker" v-if="latitude">
                <!-- #ifdef MP-BAIDU -->
                <cover-view class="bottomBtns coverView">
                    <cover-view class="headerAni flex" @click="upDownHandel">
                        <cover-view class="iconArrow"></cover-view>
                    </cover-view>
                    <cover-view class="btns col-grey">
                        <cover-view class="scrollBox">
                            <block v-for="(item,index) in list" :key="index">
                                <cover-view class="btn" :class="curr == index ? 'active':''" @click="bindKeyword(item,index)">
                                    <cover-image class="imgBtn" :src="curr==index?item.imageSel:item.imageNor" :lazy-load="true" mode="scaleToFill"></cover-image>
                                    <cover-view class="btnName">{{item.name}}</cover-view>
                                </cover-view>
                            </block>
                        </cover-view>
                    </cover-view>
                    <cover-view class="listBox" :class="up? 'heightAuto':'heightNone'">
                        <cover-view class="listScroll">
                            <block v-if="resList.length > 0">
                                <cover-view class="listItem flex" v-for="item in resList" :key="item.id">
                                    <cover-view>{{item.title}}</cover-view>
                                    <cover-view>{{item.distance}}米</cover-view>
                                </cover-view>
                            </block>
                            <block v-else>
                                <cover-view class="noRes flex font13">
                                    没有找到结果
                                </cover-view>
                            </block>
                        </cover-view>
                    </cover-view>
                </cover-view>
                <!-- #endif -->
            </map>
            
            <!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
            <view class="bottomBtns">
                <view class="headerAni flex" @click="up = !up">
                    <block v-if="up"><u-icon name="arrow-down" color="#8A8A8A" size="20"></u-icon></block>
                    <block v-else><u-icon name="arrow-up" color="#8A8A8A" size="20"></u-icon></block>
                </view>
                <view class="btns col-grey">
                    <scroll-view scroll-x="true" class="scrollBox">
                        <block v-for="(item,index) in list" :key="index">
                            <view class="btn" :class="curr == index ? 'active':''" @click="bindKeyword(item,index)">
                                <image class="imgBtn" :src="curr==index?item.imageSel:item.imageNor" :lazy-load="true" mode="scaleToFill"></image>
                                <view>{{item.name}}</view>
                            </view>
                        </block>
                    </scroll-view>
                </view>
                <view class="listBox" :class="up? 'heightAuto':'heightNone'">
                    <scroll-view scroll-y="true" class="listScroll">
                        <block v-if="resList.length > 0">
                            <view class="listItem flex" v-for="item in resList" :key="item.id">
                                <view>{{item.title}}</view>
                                <view>{{item.distance}}米</view>
                            </view>
                        </block>
                        <block v-else>
                            <view class="noRes flex font13">
                                没有找到结果
                            </view>
                        </block>
                    </scroll-view>
                </view>
            </view>
            <!-- #endif -->
        </view>
	</view>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useConfigStore } from '@/store/index';
    import { isBoolean } from '@/common/common';
    // import { dispatchClient } from '@/common/api-adviser';
    import { productNearbyAPI } from '@/common/api/house';
    var map;
	export default {
		data() {
			return {
                apiType: 'newHouse',
                apiObj: {
                    newHouse: {
                        api: '/product/mall/v6/around',
                        name: '新房周边配套'
                    }
                },
                map_: null,
                latitude: null,
                longitude: null,
                houseMaker: [],
                resList: [],
                covers: [],
                curr: 0,
                currKeyword: '地铁站',
                currType: 'metro',
                list: [{
                    name: '地铁',
                    value: '地铁站',
                    type: 'metro',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-metro-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-metro-sel.png'
                },{
                    name: '公交',
                    value: '公交站',
                    type: 'bus',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-bus-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-bus-sel.png'
                },{
                    name: '学校',
                    value: '学校',
                    type: 'school',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-school-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-school-sel.png'
                },{
                    name: '医院',
                    value: '医院',
                    type: 'hospital',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-hospital-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-hospital-sel.png'
                },{
                    name: '公园',
                    value: '公园',
                    type: 'park',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-park-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-park-sel.png'
                },{
                    name: '银行',
                    value: '银行',
                    type: 'bank',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-bank-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-bank-sel.png'
                },{
                    name: '餐饮',
                    value: '美食',
                    type: 'food',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-food-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-food-sel.png'
                },{
                    name: '购物',
                    value: '购物:超市',
                    type: 'shopping',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-shopping-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-shopping-sel.png'
                },{
                    name: '楼盘',
                    value: '房产小区',
                    type: 'house',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-house-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-house-sel.png'
                }],
                up: true,
                productId: '',
                start_time: 0,
                title: '',
                share: false
            }
		},
        computed:{
            ...mapState(useUserInfoStore, ['userInfo'])
        },
        onShareAppMessage(res) {
            return {
                title: `【${this.title}】周边配套`,
                path: `/pages/product/map/map-nearby?productId=${this.productId}&title=${this.title}&lat=${this.latitude}&lng=${this.longitude}&puid=${this.userInfo.id}&share=true&prepage=周边配套-${this.productId}-${this.title}`,
            }
        },
		onLoad(options) {
            const that = this;
            let { type, productId='', title='', lat='', lng='', puid='', share=false } = options;
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);
            this.start_time = (new Date()).getTime();

            if(type&&type!=='undefined') {
                this.list.forEach((item,index) => {
                    if(item.type == type) {
                        this.currType = item.type;
                        this.currKeyword = item.value;
                        this.curr = index;
                    }
                })
            }
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
            this.latitude = lat;
            this.longitude = lng;
            this.houseMaker = [{
                latitude: lat,
                longitude: lng,
                title: title,
                id: Number(productId),
                width: 20,
                height: 30,
                callout: {
                    content: title,
                    padding: 4,
                    borderRadius:10,
                    display: 'ALWAYS'
                }
            }]
            map = uni.createMapContext('map', this);
            this.map_=map;
           
            uni.$check_and_login(function () {
                //绑定客户
                // dispatchClient({
                //     share: that.share,
                //     puid: puid,
                //     pid: that.productId
                // });
                that.nearbySearch();
            })
		},
        
        methods: {
            ...mapActions(useConfigStore, ['setPuid']),

            //搜索周边请求
            async nearbySearch(){
                const that = this;
                let url = `${this.apiObj[this.apiType].api}/${this.productId}?key=${this.currKeyword}`;
                try {
                    const res = await productNearbyAPI(url);
                    if(res.detail == null) {
                        this.resList = [];
                        this.covers = [...this.houseMaker];
                        return
                    };
                    let dataList = res.detail.data;
                    let mks = [];
                    if(dataList.length > 0) {
                        dataList.sort(function(a, b){
                            return a._distance - b._distance
                        })
                        for (var i = 0; i < dataList.length; i++) {
                            mks.push({
                                title: dataList[i].title,
                                id: Number(dataList[i].id),
                                // #ifdef MP-WEIXIN || MP-BAIDU
                                iconPath: that.list[that.curr].imageSel,
                                // #endif
                                latitude: dataList[i].location.lat,
                                longitude: dataList[i].location.lng,
                                distance: dataList[i]._distance,
                                width: 20,
                                height: 20,
                                callout: {
                                    content: dataList[i].title,
                                    padding: 4,
                                    borderRadius:10
                                }
                            })
                        }
                    }
                    that.resList = mks.length>10?mks.slice(0,10):mks;
                    that.covers = mks.concat(that.houseMaker);
                    if(map) {
                        map.moveToLocation({
                            longitude: that.longitude,
                            latitude: that.latitude
                        });
                        map.includePoints({
                            points: that.covers,
                            padding:[50, 50, 100, 50]
                        })
                    }
                } catch (error) {
                    console.log(error);
                }
            },
            
			bindMarker(e){
            },
            
            bindKeyword(item,index){
                this.currType = item.type;
                this.currKeyword = item.value;
                this.curr = index;
                this.nearbySearch();
            },
            upDownHandel(){
                this.up = !this.up
            }
		}
	}
</script>

<style lang="scss" scoped>
	.page{
        position: relative;
        /* #ifdef MP-BAIDU */
        .coverView{
            .iconArrow{
                margin: 20rpx auto;
                width: 40rpx;
                height: 4rpx;
                border-radius: 4rpx;
                background-color: #8A8A8A;
            }
            .scrollBox{
                width: 100%;
                overflow-x: scroll;
                .btn{
                    .imgBtn{
                        margin: 0rpx auto 15rpx auto;
                    }
                    .btnName{
                        line-height: 1;
                    }
                }
            }
            .listScroll{
                overflow-y: scroll;
            }
        }
        /* #endif */
		.bottomBtns{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 1;
            line-height: 1;
            .headerAni{
                background-color: rgba(255,255,255,.9);
                padding: 10rpx 0rpx;
            }
            .btns{
                background-color: rgba(255,255,255,.9);
                padding: 20rpx 0rpx;
                .scrollBox{
                    white-space: nowrap;
                    height: 100rpx;
                }
                .btn{
                    width: 100rpx;
                    height: 100rpx;
                    text-align: center;
                    display: inline-block;
                    .imgBtn{
                        width: 50rpx;
                        height: 50rpx;
                        margin-bottom: 15rpx;
                    }
                }
                .active{
                    color: $theme-color;
                }
            }
            .listBox{
                transition: max-height 0.4s linear;
                background-color: #FFFFFF;
                .listScroll{
                    height: 400rpx;
                    .listItem{
                        justify-content: space-between;
                        border-top: 1rpx solid rgba(0,0,0,.05);
                        padding: 50rpx 20rpx;
                    }
                    .noRes{
                        padding: 50rpx 20rpx;
                    }
                }
            }
            .heightNone {
                max-height: 0;
                overflow: hidden;
            }
            .heightAuto {
                max-height: 430rpx;
            }
        }
	}
</style>
